﻿@page "/chart/marker-chart"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates FB users in a chart for different countries in different years. In line-based series, data points can be annotated using symbols.</p>
</SampleDescription>
<ActionDescription>
    <p>Each point in a series can be represented by a marker as a symbol. You can also customize the shape, size and color of the symbol with the <code>ChartMarker</code> class.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the marker can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/data-markers'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="FB Penetration of Internet Audience" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Countries" Interval="1" LabelIntersectAction="LabelIntersectAction.Rotate45" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}%" Title="Penetration" Minimum="0" Maximum="75" Interval="15" RangePadding="ChartRangePadding.None">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Format="${point.text} : ${point.y}"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="December 2007" XName="Country" Width="2"
                         Opacity="1" YName="FBUser_07" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10" Shape="ChartShape.Diamond">
                    <ChartDataLabel Name="TooltipMappingName"></ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="December 2008" XName="Country" Width="2"
                         Opacity="1" YName="FBUser_08" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10" Shape="ChartShape.Pentagon">
                    <ChartDataLabel Name="TooltipMappingName"></ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="December 2009" XName="Country" Width="2"
                         Opacity="1" YName="FBUser_09" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10" Shape="ChartShape.Triangle">
                    <ChartDataLabel Name="TooltipMappingName"></ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<LineChartData> ChartPoints { get; set; } = new List<LineChartData>
    {
        new LineChartData { Country = "WW", FBUser_07 = 12, FBUser_08 = 22, FBUser_09 = 38.3, TooltipMappingName = "World Wide"},
        new LineChartData { Country = "EU", FBUser_07 = 9.9, FBUser_08 = 26, FBUser_09 = 45.2, TooltipMappingName = "Europe" },
        new LineChartData { Country = "APAC", FBUser_07 = 6.4, FBUser_08 = 9.6, FBUser_09 = 18.2, TooltipMappingName = "Asia Pacific"},
        new LineChartData { Country = "LATAM", FBUser_07 = 4.4, FBUser_08 = 28, FBUser_09 = 46.7, TooltipMappingName = "Latin America"},
        new LineChartData { Country = "MEA", FBUser_07 = 30, FBUser_08 = 45.7, FBUser_09 = 61.5, TooltipMappingName = "Middle East Africa"},
        new LineChartData { Country = "NA", FBUser_07 = 25.3, FBUser_08 = 35.9, FBUser_09 = 64, TooltipMappingName = "North America"},
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class LineChartData
    {
        public string Country { get; set; }
        public double FBUser_07 { get; set; }
        public double FBUser_08 { get; set; }
        public double FBUser_09 { get; set; }
        public string TooltipMappingName { get; set; }
    }

}
